<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/course.css">
  <title>培训管理</title>
</head>
<script>
  function getParam(name) {
    return location.href.match(new RegExp('[?#&]' + name + '=([^?#&]+)', 'i')) ? RegExp.$1 : '';
  }
  var magicHtmlPath = '/obpm/html'
  var obpmFilePath = '/obpm'
  var appName = getParam('magicAppName')
  var type = getParam('type') ? getParam('type') : 'all'; //all 查询所有 collect 收藏记录
  var appId = getParam('appId')
  var ajax = function (data) {
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (
            (xhr.status >= 200 && xhr.status < 300) ||
            xhr.status === 304
          ) {
            // resolve(xhr.responseText);
            data.success(xhr.responseText);
          } else {
            reject(xhr.status);
          }
        } else {
          // HTTP请求还在继续...
        }
      };
      xhr.open(data.methods, data.url, data.async);
      xhr.setRequestHeader("content-type", "application/json");

      delete data.methods;
      delete data.url;
      xhr.send(JSON.stringify(data.data));
    });
  };


  function getCourseList() {
    let inputValue = document.getElementById('inputValue').value
    let selectValue = document.getElementById('selectValue').value
    let data = {
      course_type:selectValue ,//课程类型
      course_name: inputValue,//课程名称
      page:1, //页数
      page_lines: 10,//每页多少行
      type:type, //all 查询所有 collect 收藏记录
    }
    let courseList = {
      methods: "post",
      url: `${obpmFilePath}/magic-api/${appName}/course_list`,
      async: true,
      data:data,
      success: function (result) {
        if (result) {
          let content = document.getElementsByClassName('content')[0]
          if(JSON.parse(result).data) {
            let course_list = JSON.parse(result).data.course_list
            let courseType = ''
            for(let i = 0; i < course_list.length; i ++) {
              let course_cover = JSON.parse(course_list[i].course_cover)
              courseType += `
              <div class="courseType" >
                <div class="courseImg" >
                  <img src="${course_cover[0].url}" alt="" class="course_img">
                  <div class="label">          
                    <span>${course_list[i].course_type == '系列课' ? course_list[i].course_type + '：' + course_list[i].chapter_number + '节': course_list[i].course_type}</span>
                    <span>${course_list[i].founder}</span>
                  </div>
                  <img src="./img/collect.png" alt="" class="collectTag" style="display:${course_list[i].favorite_status == '02'? 'none':'block' }">
                </div>
                <div class="courseName">
                  ${course_list[i].course_name}
                </div>
                <div class="introduction">${course_list[i].course_introduction ? course_list[i].course_introduction : '暂无简介'}</div> 
                <div class="courseTag">
                  <span>${course_list[i].learning_status == '01' ? '已学习' : '未学习'}</span>
                  <span class="tag" onclick="toStudy(${JSON.stringify(course_list[i]).replace(/"/g, '&quot;')})">去学习</span>
                </div>
              </div>
              `
            }
            content.innerHTML = `<div style="width:100%;display:flex;flex-wrap:wrap;">${courseType}<div>`
          }else {
            let errmsg = JSON.parse(result).errmsg
            content.innerHTML = errmsg
          }
        }
      },
    };
    ajax(courseList); 
  }
  function toStudy(item) {
    console.log(item,'item')
    let menuId = getParam('menuId')
    if(item) {
      let actionContent = magicHtmlPath + '/' + appName + '/courseDetail.html?course_id='
      +item.course_id + '&magicAppName=' + appName + '&appId='+appId
      let params = {
        linkType: '07',
        appId: appId,
        active: true,
        actionContent:actionContent,
        name: item.course_name,
        refreshId: menuId,
        id:item.course_id,
        title:'',
        _select: '',
        magicAppName:appName,
      }
      top.obpmOAction('addTab',params)
    }
  }
  function changeSelect() {
    let value = document.getElementById('selectValue').value 
    if(value) {
      document.getElementById('selectValue').style.color = '#606266'
    }else {
      document.getElementById('selectValue').style.color = '#dcdfe6'
    }
  }
</script>
<body onload="getCourseList()">
  <div id="main">
    <div class="search">
      <div>
        <span><input type="text" placeholder="请输入标题或关键字" id="inputValue"></span>
        <span>
          <select name="" id="selectValue" class="select" style="color: #dcdfe6;" onchange="changeSelect()">
            <option value ="" style="color: #dcdfe6;">课程类型</option>
            <option value ="系列课" class="option">系列课</option>
            <option value ="视频" class="option">视频</option>
            <option value="文章" class="option">文章</option>
            <option value="文档" class="option">文档</option>
          </select>
        </span>
        <span class="searchBtn" onclick="getCourseList()">查询</span>
      </div>
    </div>
    <div class="content">
      <!-- <div class="courseType" >
        <div class="courseImg" >
          <img src="./img/project_template.png" alt="" class="course_img">
          <div class="label">          
            <span>系列课：7节</span>
            <span>王建梅</span>
          </div>
          <img src="./img/collect.png" alt="" class="collectTag">
        </div>
        <div class="courseName">
          入职如何快速上手
        </div>
        <div class="introduction">简介简洁简介简介</div> 
        <div class="courseTag">
          <span>未开始</span>
          <span class="tag">去学习</span>
        </div>
      </div> -->
    </div>
  </div>
</body>
</html>